Adding XAML Support and Upgrading to TurboModule for Windows #1025

protikbiswas100 · 2025-11-17T08:17:19Z

Summary

Test Plan

Created a sample DateTimePicker app to demonstrate usage, ran the app using yarn react-native run-windows --arch x64

date_time_picker_demo.mp4

What's required for testing (prerequisites)? NA

What are the steps to reproduce (after prerequisites)? NA

Compatibility

OS	Implemented
iOS	❌
Android	❌
Windows	✅

Checklist

I have tested this on a device and a simulator
[ x] I added the documentation in README.md
[ x] I updated the typed files (TS and Flow)
I added a sample use of the API in the example project (example/App.js)
I have added automated tests, either in JS or e2e tests, as applicable

- Implement DatePicker TurboModule with promise-based API - Implement TimePicker TurboModule with promise-based API - Add JavaScript wrapper (DateTimePickerWindows) for imperative API - Add TurboModule specs matching Android pattern - Register TurboModules via AddAttributedModules() - Update documentation with TurboModule usage examples - Export DateTimePickerWindows from main index.js This provides feature parity with Android's imperative DateTimePickerAndroid.open() API.

- Fix circular import in DateTimePickerWindows.js (was importing from itself instead of .windows file) - Change TurboModuleRegistry.getEnforcing() to get() for Windows specs to handle test environments - Update Jest snapshot to include DateTimePickerWindows export All tests now passing (22/22)

- Created TimePickerFabric.cpp/h implementing ContentIslandComponentView - Registered RNTimePickerWindows as Fabric component - Fixed DateTimePickerWindows.open() to return promise result - Updated ReactPackageProvider to register TimePicker Fabric component - Added TimePickerFabric files to vcxproj build configuration This enables XAML TimePicker control to work with React Native's new architecture (Fabric) on Windows platform.

anupriya13 · 2025-12-11T10:43:26Z

@protikbiswas100 In the video attached there is no date time picker ui please check and add

protikbiswas100 · 2025-12-12T04:41:29Z

@protikbiswas100 In the video attached there is no date time picker ui please check and add

added a demo video

- Add main.cpp with wWinMain entry point for native Win32 window creation - Remove XAML/IDL dependencies (App.xaml, MainPage.xaml, App.idl, MainPage.idl) - Update DateTimePickerDemo.vcxproj to use standard Application configuration (not UWP) - Remove AppContainerApplication and ApplicationType properties - Simplify project structure: removed UWP manifest and asset references - Update entry point from App::OnLaunched to wWinMain(HINSTANCE, HINSTANCE, PWSTR, int) - Implement WindowProc message handler for WM_DESTROY and WM_SIZE events - Initialize React Native host directly in C++ code - Use direct Windows API calls (RegisterClass, CreateWindowEx, ShowWindow) - Maintain full compatibility with DateTimePicker component and React Native Windows - Update example/index.js entry point to DateTimePickerDemo component This provides a cleaner, simpler Win32 application structure without UWP overhead, while maintaining full React Native and DateTimePicker functionality.

anupriya13 · 2025-12-15T13:32:45Z

@protikbiswas100 why does the video text says "web preview" ?

Can you please record with entire windows app window so that the close button is visible and update the js ui with correct text details.

protikbiswas100 · 2025-12-16T04:15:34Z

@protikbiswas100 why does the video text says "web preview" ?

Can you please record with entire windows app window so that the close button is visible and update the js ui with correct text details.

I copied and pasted the app.tsx code from some place else, I will do it afresh and reupload the video

…ependencies - Replaced App/MainPage UWP classes with clean Win32 entry point - Changed from UWP to Win32 application type in vcxproj - Updated to use ReactNativeAppBuilder instead of XAML framework - Converted to use Composition-based CppApp props (not UWP) - Added proper Win32 headers and resource files - Removed XAML, IDL, and manifest files - Clean C++ only codebase

- Added DateTimePickerDemo.rc with version info and icon resources - Added small.ico application icon (16x16 minimal icon) - Updated resource.h with proper Win32 resource definitions - Updated vcxproj to include ResourceCompile and icon - Updated vcxproj.filters to organize resource files This completes the UWP to Win32 conversion by adding standard Win32 resource files that were removed during the migration.

protikbiswas100 · 2025-12-22T10:19:13Z

/azp run PR

sundaramramaswamy

Needs involved changes. Please handle the comments and related places and revert for a fresh code review.

src/DateTimePickerWindows.windows.js

windows/DateTimePickerWindows/TimePickerModuleWindows.cpp

windows/DateTimePickerWindows/DatePickerModuleWindows.cpp

windows/DateTimePickerWindows/DatePickerModuleWindows.h

windows/DateTimePickerWindows/DateTimePickerFabric.h

windows/DateTimePickerWindows/DateTimePickerFabric.cpp

protikbiswas100

addressed all review comments in next commit

src/DateTimePickerWindows.windows.js

windows/DateTimePickerWindows/DatePickerModuleWindows.cpp

windows/DateTimePickerWindows/DatePickerModuleWindows.h

windows/DateTimePickerWindows/DateTimePickerFabric.cpp

windows/DateTimePickerWindows/DateTimePickerFabric.h

windows/DateTimePickerWindows/TimePickerModuleWindows.cpp

sundaramramaswamy

Please address comments.

sundaramramaswamy · 2025-12-31T11:04:58Z

windows/DateTimePickerWindows/DatePickerComponent.cpp

+DatePickerComponent::DatePickerComponent() {
+  m_control = winrt::Microsoft::UI::Xaml::Controls::CalendarDatePicker{};


Suggested change

DatePickerComponent::DatePickerComponent() {

m_control = winrt::Microsoft::UI::Xaml::Controls::CalendarDatePicker{};

DatePickerComponent::DatePickerComponent()

: m_control{winrt::Microsoft::UI::Xaml::Controls::CalendarDatePicker{}} {

}

Initializer lists are better to initialize members in C++. Refer Should my constructors use “initialization lists” or “assignment”?.

sundaramramaswamy · 2025-12-31T11:13:09Z

windows/DateTimePickerWindows/DatePickerComponent.cpp

+DatePickerComponent::~DatePickerComponent() {
+  Cleanup();
+}


This class doesn't need a destructor (or the Cleanup method). Why?

unique_ptr<std::function> does nothing when it goes out of scope

Auto-revoking event tokens get called automatically when going out of scope (refer).

void f() { { ButtonClicked_Revoker r = button.Click(winrt::auto_revoke, [](auto const&, auto const &) { }); // yada yada } // `r` is out of scope. It's destructor automatically would've called `r.revoke()`. // Revoked. Callback would no longer be called. }

This concept is recursive. When an object holding a revoker gets destroyed, its members get destroyed too. Upon destruction, auto-revoker revokes; hence the name auto-revoker.
Please drop both ~DatePickerComponent and Cleanup.

sundaramramaswamy · 2025-12-31T11:16:50Z

windows/DateTimePickerWindows/TimePickerComponent.cpp

+TimePickerComponent::TimePickerComponent() {
+  m_control = winrt::Microsoft::UI::Xaml::Controls::TimePicker{};
+}


Please use initalizer list.

sundaramramaswamy · 2025-12-31T11:17:14Z

windows/DateTimePickerWindows/TimePickerComponent.cpp

+TimePickerComponent::~TimePickerComponent() {
+  Cleanup();
+}


Like mentioned earlier, both Cleanup and destructor for this class are unneeded. Please drop.

sundaramramaswamy · 2025-12-31T11:18:38Z

windows/DateTimePickerWindows/TimePickerFabric.cpp

+
+  // Update clock format (12-hour vs 24-hour)
+  if (props.find("is24Hour") != props.end()) {
+    bool is24Hour = props["is24Hour"].AsBoolean();


Suggested change

bool is24Hour = props["is24Hour"].AsBoolean();

const bool is24Hour = props["is24Hour"].AsBoolean();

Why? Refer What is "const correctness"?.

sundaramramaswamy · 2025-12-31T12:03:10Z

windows/DateTimePickerWindows/TimePickerFabric.cpp

+
+  // Update minute increment
+  if (props.find("minuteInterval") != props.end()) {
+    int32_t minuteInterval = static_cast<int32_t>(props["minuteInterval"].AsInt64());


Suggested change

int32_t minuteInterval = static_cast<int32_t>(props["minuteInterval"].AsInt64());

const int32_t minuteInterval = static_cast<int32_t>(props["minuteInterval"].AsInt64());

sundaramramaswamy · 2025-12-31T12:04:05Z

windows/DateTimePickerWindows/TimePickerFabric.cpp

+    int64_t timeInMilliseconds = props["selectedTime"].AsInt64();
+    auto timeInSeconds = timeInMilliseconds / 1000;
+    auto hours = (timeInSeconds / 3600) % 24;
+    auto minutes = (timeInSeconds / 60) % 60;
+
+    // Create TimeSpan (100-nanosecond intervals)
+    winrt::Windows::Foundation::TimeSpan timeSpan{
+        static_cast<int64_t>((hours * 3600 + minutes * 60) * 10000000)
+    };


Suggested change

int64_t timeInMilliseconds = props["selectedTime"].AsInt64();

auto timeInSeconds = timeInMilliseconds / 1000;

auto hours = (timeInSeconds / 3600) % 24;

auto minutes = (timeInSeconds / 60) % 60;

// Create TimeSpan (100-nanosecond intervals)

winrt::Windows::Foundation::TimeSpan timeSpan{

static_cast<int64_t>((hours * 3600 + minutes * 60) * 10000000)

};

const int64_t timeInMilliseconds = props["selectedTime"].AsInt64();

const auto timeInSeconds = timeInMilliseconds / 1000;

const auto hours = (timeInSeconds / 3600) % 24;

const auto minutes = (timeInSeconds / 60) % 60;

// Create TimeSpan (100-nanosecond intervals)

const winrt::Windows::Foundation::TimeSpan timeSpan{

static_cast<int64_t>((hours * 3600 + minutes * 60) * 10000000)

};

sundaramramaswamy · 2025-12-31T12:04:57Z

windows/DateTimePickerWindows/TimePickerFabric.h

+private:
+  winrt::Microsoft::UI::Xaml::XamlIsland m_xamlIsland{nullptr};
+  winrt::Microsoft::UI::Xaml::Controls::TimePicker m_timePicker{nullptr};
+  bool m_updating = false;


Please refer to my comment on another file where m_updating is used.

sundaramramaswamy · 2025-12-31T12:05:21Z

windows/DateTimePickerWindows/TimePickerFabric.h

+inline void RegisterTimePickerComponentView(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) {
+  packageBuilder.as<winrt::Microsoft::ReactNative::IReactPackageBuilderFabric>().AddViewComponent(


Please move implementation alone to TimePickerFabric.cpp. Keep the interface here.

sundaramramaswamy · 2025-12-31T12:06:07Z

windows/DateTimePickerWindows/TimePickerModuleWindows.cpp

+void TimePickerModule::Open(ReactNativeSpecs::TimePickerModuleWindowsSpec_TimePickerOpenParams &&params,
+                            winrt::Microsoft::ReactNative::ReactPromise<ReactNativeSpecs::TimePickerModuleWindowsSpec_TimePickerResult> promise) noexcept {
+  // Clean up any existing picker
+  m_timePickerComponent.reset();


Combine unqiue_ptr.reset with assignment below. Refer to my other comment.

Protik Biswas added 3 commits November 17, 2025 12:21

adding stub file, code gen header and cpp implementation

49dbc5b

adding changes

2b0019f

protikbiswas100 changed the title ~~adding stub file, code gen header and cpp implementation~~ Adding XAML Support and Upgrading to TurboModule for Windows Nov 17, 2025

Protik Biswas added 6 commits November 17, 2025 14:57

adding DateTimePickerWindows.windows.js file

eacf7b5

adding mounting and unmounting of xaml comeponents

7ba0c29

changing the namespace

e8c5182

adding demo example

65c12f0

Protik Biswas added 3 commits December 15, 2025 18:36

Remove App.xaml and App.idl files from example Windows project

ae1cd3f

Remove MainPage.idl and MainPage.xaml from example Windows project

b9cd88c

protikbiswas100 closed this Dec 16, 2025

protikbiswas100 reopened this Dec 16, 2025

protikbiswas100 marked this pull request as draft December 16, 2025 06:33

Protik Biswas added 6 commits December 16, 2025 12:19

fixing android build issue

d5c703b

fixing android bundle build issue

6c82611

removing old xaml dependency so that it gets loaded by VS

005dbd2

adding vccxproj file changes

9e0b457

fixing android , ios build issue

057fc23

Protik Biswas added 2 commits December 23, 2025 09:54

updating xcode version tyo fix CI builds

a4d143c

updating xcode version tyo fix CI builds 1

7370f85

adding DateTimePicker.package

012667b

protikbiswas100 marked this pull request as ready for review December 23, 2025 10:25

sundaramramaswamy suggested changes Dec 29, 2025

View reviewed changes

protikbiswas100 commented Dec 30, 2025

View reviewed changes

addressing first review comments

2187bb2

sundaramramaswamy reviewed Dec 31, 2025

View reviewed changes

		DatePickerComponent::DatePickerComponent() {
		m_control = winrt::Microsoft::UI::Xaml::Controls::CalendarDatePicker{};

	bool is24Hour = props["is24Hour"].AsBoolean();
	const bool is24Hour = props["is24Hour"].AsBoolean();

	int32_t minuteInterval = static_cast<int32_t>(props["minuteInterval"].AsInt64());
	const int32_t minuteInterval = static_cast<int32_t>(props["minuteInterval"].AsInt64());

		inline void RegisterTimePickerComponentView(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) {
		packageBuilder.as<winrt::Microsoft::ReactNative::IReactPackageBuilderFabric>().AddViewComponent(

Uh oh!

Adding XAML Support and Upgrading to TurboModule for Windows #1025

Are you sure you want to change the base?

Adding XAML Support and Upgrading to TurboModule for Windows #1025

Uh oh!

Conversation

protikbiswas100 commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test Plan

What's required for testing (prerequisites)? NA

What are the steps to reproduce (after prerequisites)? NA

Compatibility

Checklist

Uh oh!

anupriya13 commented Dec 11, 2025

Uh oh!

protikbiswas100 commented Dec 12, 2025

Uh oh!

anupriya13 commented Dec 15, 2025

Uh oh!

protikbiswas100 commented Dec 16, 2025

Uh oh!

protikbiswas100 commented Dec 22, 2025

Uh oh!

sundaramramaswamy left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

protikbiswas100 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sundaramramaswamy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

protikbiswas100 commented Nov 17, 2025 •

edited

Loading

sundaramramaswamy left a comment •

edited

Loading